<!--
 * @Author: daifen
 * @Date: 2020-07-17 09:47:02
 * @LastEditors: daifen
--> 
<template>
  <div class="content">
    <div class="form-content mt-10">
      <el-form ref="form" :model="form">
        <el-row :gutter="10">
          <el-col :span="8" class="flex-center">
            <span class="width-120">X轴</span>
            <el-select v-model="model" placeholder>
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>

          <el-col :span="8" class="flex-center">
            <span class="width-120">y轴</span>
            <el-select v-model="model" placeholder>
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="chart-content mt-10">
      <div class="text-right">
        <el-radio-group v-model="chartType" @change="handleChangeChart">
          <el-radio-button label="饼状图"></el-radio-button>
          <el-radio-button label="柱状图"></el-radio-button>
          <el-radio-button label="折线图"></el-radio-button>
        </el-radio-group>
      </div>
      <div style="height:300px;">
        <div
          v-show="chartType=='饼状图'"
          style="width:100%;height:100%;"
          :id="pieEcharts"
          class="echarts"
          ref="pieEcharts"
        ></div>
        <div
          v-show="chartType=='柱状图'"
          style="width:100%;height:100%;"
          :id="barEcharts"
          class="echarts"
          ref="barEcharts"
        ></div>
        <div
          v-show="chartType=='折线图'"
          style="width:100%;height:100%;"
          :id="lineEcharts"
          class="echarts"
          ref="lineEcharts"
        ></div>
      </div>
    </div>
    <div class="table-content">
      <el-table :data="chartData" style="width: 100%">
        <el-table-column prop="name" label="name" width="width"></el-table-column>
        <el-table-column prop="value" label="value" width="width"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
// 引入echarts
import echarts from "echarts";
export default {
  name: "commonChartTable",
  props: {
    // series中的值
    chartData: {
      type: Array,
      default: () => []
    },
    //标题文字
    title: {
      type: String,
      default: ""
    },
    //副标题文字
    subtext: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      chartType: "饼状图",
      nameData: [],
      valueData: [],
      options: [],
      model: "",
      form: {}
    };
  },
  mounted() {
    const vm = this;

    vm.$nextTick(() => {
      vm.handleChartData();
      vm.drawPieChart();
    });
  },
  methods: {
    /**
     * @Desc: 将数组对象转化为数组
     * @Author: daifen
     * @Date: 2020-07-17 10:41:35
     * @param {type}
     * @return:
     */
    handleChartData() {
      this.chartData.forEach(val => {
        this.nameData.push(val.name);
        this.valueData.push(val.value);
      });
    },
    /**
     * @Desc: 切换图形
     * @Author: daifen
     * @Date: 2020-07-17 10:35:07
     * @param {type}
     * @return:
     */
    handleChangeChart(e) {
      const vm = this;
      if (e == "饼状图") {
        vm.$nextTick(() => {
          vm.drawPieChart();
        });
      } else if (e == "柱状图") {
        vm.$nextTick(() => {
          vm.drawBarChart();
        });
      } else if (e == "折线图") {
        vm.$nextTick(() => {
          vm.drawLineChart();
        });
      }
    },
    /**
     * @Desc: 绘制饼图
     * @Author: daifen
     * @Date: 2020-07-17 10:26:15
     * @param {type}
     * @return:
     */
    drawPieChart() {
      //   if (mypieChart) {
      //     mypieChart.clear();
      //   }
      const vm = this;
      // 基于准备好的dom，初始化echarts实例
      let mypieChart = echarts.init(document.getElementById(vm.pieEcharts));
      // 绘制图表
      mypieChart.setOption({
        title: {
          text: vm.title,
          subtext: vm.subtext,
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "70%",
            center: ["50%", "60%"],
            data: vm.chartData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    },
    /**
     * @Desc: 绘制折线图
     * @Author: daifen
     * @Date: 2020-07-17 10:26:43
     * @param {type}
     * @return:
     */
    drawLineChart() {
      const vm = this;
      // 基于准备好的dom，初始化echarts实例
      let mylineChart = echarts.init(document.getElementById(this.lineEcharts));
      // 绘制图表
      mylineChart.setOption({
        xAxis: {
          type: "category",
          data: vm.nameData
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: vm.valueData,
            type: "line"
          }
        ]
      });
    },
    /**
     * @Desc: 绘制柱状图
     * @Author: daifen
     * @Date: 2020-07-17 10:26:43
     * @param {type}
     * @return:
     */
    drawBarChart() {
      const vm = this;
      // 基于准备好的dom，初始化echarts实例
      let mybarChart = echarts.init(document.getElementById(vm.barEcharts));
      mybarChart.setOption({
        xAxis: {
          type: "category",
          data: vm.nameData
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: vm.valueData,
            type: "bar"
          }
        ]
      });
    }
  },
  computed: {
    pieEcharts() {
      return "pieEcharts" + Math.random() * 100000;
    },
    lineEcharts() {
      return "lineEcharts" + Math.random() * 100000;
    },
    barEcharts() {
      return "barEcharts" + Math.random() * 100000;
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  .form-content {
    background-color: #efefef;
    box-sizing: border-box;
    padding: 5px;
  }
}
</style>